<template>
	<view>
		<image class="bg" src="/static/index/collect_bg.jpg" mode="scaleToFill"></image>
		<hx-navbar title="绑定银行卡" :back="true" :fixed="false" color="#fff" barPlaceholder="hidden" transparent="auto">
		</hx-navbar>

		<view class="container">
			<view class="settings_item" @tap="add_card()" v-if="card_list.length == 0">
				<!-- 				<image src="/static/user/bank_add.png" mode="widthFix" style="width: 36rpx;
				height: 36rpx;margin-right: 20rpx"></image> -->
				<view class="settings_name">
					添加银行卡
				</view>
				<n-icon name="right" size="19" color="#e5e5e5"></n-icon>
			</view>

			<view class="bank_item" v-for="item,id in card_list" :key="id" @tap="add_card(item.id)">
				<image src="/static/user/bank.png" mode="widthFix" class="bank_icon"></image>

				<view class="bank_info">
					<view class="bank_name">
						{{item.account_bank}}
					</view>
					<view class="">
						{{item.account_name}} 丨 {{item.card_number}}
					</view>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				card_list: []
			}
		},
		onShow() {
			this.$api.getBankList({}, res => {
				if (res.status) {
					this.card_list = res.data;
				}
			})
		},
		methods: {
			add_card: function(id = '') {
				uni.navigateTo({
					url: 'add?id=' + id
				})
			}
		}
	}
</script>

<style>
	@import url('/pages/user/settings/settings.css');
</style>

<style lang="scss" scoped>
	.settings_name {
		font-size: 28rpx;
		flex: 1;
		width: auto;
	}

	.add_bank {
		width: 36rpx;
		height: 36rpx;
		margin-right: 20rpx;
	}

	.bank_name {
		font-size: 32rpx;
		font-weight: bold;
		line-height: 45rpx;
		color: #fff;
		padding-bottom: 10rpx;
	}

	.bank_info {
		line-height: 28rpx;
		font-size: 20rpx;
		font-weight: 400;
		color: #fff;
	}

	.bank_icon {
		width: 100rpx;
		height: 100rpx;
		margin-right: 30rpx;
	}

	.bank_item {
		width: 100%;
		height: 180rpx;
		display: flex;
		align-items: center;
		/* border-bottom: 1rpx solid #d9d9d9; */
		background-color: $bg-box;
		border-radius: 20rpx;
		padding: 0 20rpx;
	}
</style>
